<template>
	<view class="container">
		<swiper :indicator-dots="false" :autoplay="false" :duration="300"
		@change="swiperChange" :current="currentSwiper" :disable-touch="true"
		style="height: calc(100vh - 60px);overflow: hidden;">
			<swiper-item>
				<view class="swiper-item">
					<tab1 v-show="currentTab == '1'" v-if="isShow[0]" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<tab2 v-show="currentTab == '2'" v-if="isShow[1]" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<tab3 v-show="currentTab == '3'" v-if="isShow[2]" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<tab4 v-show="currentTab == '4'" v-if="isShow[3]" />
				</view>
			</swiper-item>
		</swiper>
      <view class="tabbar dot" v-if="isTab" 
      :style="{'--left': `${currentTab * 25 - 12.5}vw`, zIndex: popup ? '-1' : '1'}">
         <view class="tabbar-item" v-for="tab in tabList" :key="tab.text" 
         :class="{actived: currentTab == tab.index}"
         @click="swichTab(tab.index)">
               <image :src="tab.icon" v-if="currentTab != tab.index"></image>
               <image :src="tab.selectIcon" v-else></image>
               <text class="text">{{tab.text}}</text>
               <view class="badge" v-if="badge != 0 && tab.index == 3">{{ badge > 99 ? 99 : badge }}</view>
         </view>
      </view>

      <c-loading></c-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
            currentSwiper: 0,
				isTab: true,
            tabList: [
               {
                  id: 'tab1',
                  index: '1',
                  text: '首页',
                  path: '/pages/tabbar/tab1',
                  icon: '/static/tabbar/tab1.png',
                  selectIcon: '/static/tabbar/tab1-s.png'
               }, {
                  id: 'tab2',
                  index: '2',
                  text: '社区',
                  path: '/pages/tabbar/tab2',
                  icon: '/static/tabbar/tab2.png',
                  selectIcon: '/static/tabbar/tab2-s.png'
               }, {
                  id: 'tab3',
                  index: '3',
                  text: '消息',
                  path: '/pages/tabbar/tab3',
                  icon: '/static/tabbar/tab3.png',
                  selectIcon: '/static/tabbar/tab3-s.png',
                  badge: 0
               }, {
                  id: 'tab4',
                  index: '4',
                  text: '我的',
                  path: '/pages/tabbar/tab4',
                  icon: '/static/tabbar/tab4.png',
                  selectIcon: '/static/tabbar/tab4-s.png'
               }
            ],
            currentTab: '1',
            popup: false,
				isShow: [true, false, false, false]
			}
		},
      computed: {
         badge() {
            return this.$store.getters.message.reduce((acc, cur) => {
               return acc + cur.badge
            }, 0)
         }
      },
      mounted() {
         uni.$on('changePop', data => {
            this.popup = data
         })
      },
		methods: {
         swiperChange(e) {
           this.currentTab = e.detail.current + 1
         },
		   swichTab(index) {
            this.currentTab = index
            this.currentSwiper = index - 1
				this.isShow[index - 1] = true
		   }
		},
	}
</script>

<style lang="scss" scoped>
   .swiper-item {
      height: calc(100vh - 50px);
      z-index: -1;
      
      & /deep/ .content {
         height: calc(100vh - 104px - var(--status-bar-height));
      }
   }
   .tabbar {
      position: absolute;
      display: flex;
      width: 100vw;
		height: 60px;
      line-height: 20px;
      left: 0;
      bottom: var(--window-bottom);
      background-color: #ffffff;
		border-top: 1px solid #f5f5f5;
      box-sizing: border-box;
      overflow: hidden;
      z-index: 0;
      
      .tabbar-item {
         position: relative;
         width: 100%;
			height: 60px;
         text-align: center;
         
         image {
            display: block;
            width: 24px;
            height: 24px;
            margin: 5px auto 0;
         }

         .badge {
            position: absolute;
            top: 5px;
            left: calc(50% + 22px);
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ff1100;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            color: #ffffff;
            font-size: 12px;
         }
      }
      .actived {
         position: relative;
         
         image {
            position: relative;
            top: 50%;
            transform: translateY(-17px);
            transition: all .4s;
         }
         
         .text {
            position: absolute;
            bottom: 0;
            transform: translate(-50%, 100%);
            transition: all .4s;
         }
      }
   }
   .dot::before {
      position: absolute;
      content: '';
      display: block;
      width: 45px;
      height: 45px;
      top: 0;
      bottom: 0;
      left: var(--left);
      margin: auto;
      transform: translateX(-50%);
      transition: all .3s;
      border-radius: 50%;
      background-color: #0aa679;
   }
   @keyframes slide {
      from {
         
      }
      to {
         top: 50px;
      }
   }
</style>
